A Bootstrap version 5.3 BC Government look-and-feel featuring:
- The BC Sans typeface
- Compatibility with pure Bootstrap markup
The project is a successor to the previous Gov-4.0-Bootstrap-theme Gov-2.0-Bootstrap-Skeleton and mygovbc-bootstrap-theme. We combined the best of all projects and leverage the latest Bootstrap version.
-
You can directly use the minified CSS and JS files in your project after building with
npm run build. The files will be available in thedistdirectory.For production use, add these to your HTML:
<head> <!-- CSS file --> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <!-- JS file with type="module" for ES modules support --> <script type="module" src="js/bootstrap-theme.min.js"></script> </head>
For development with source files, use this approach instead:
<head> <!-- Import the JS which will automatically process the SCSS --> <script type="module"> import './src/js/bootstrap-theme.js'; </script> </head>
Note: The development approach directly imports the source JavaScript file, which in turn imports the SCSS. This provides the best experience when working with Vite's dev server.
-
This section describes how to change the theme or remove unneeded CSS
-
You'll need the following tools installed on your device:
- NodeJS 20 LTS+ with NPM 10+ to build
-
After your tools are in place, you should install some packages. In the working directory:
git clone https://github.com/richfrem/bootstrap-v5-theme.git cd bootstrap-v5-theme npm install -
To build the styles, JavaScript and other assets for production, use:
npm run build:vite
This command uses Vite to build optimized CSS, JS, and assets for production.
For development with hot module replacement and real-time updates:
npm run dev
Note: While the original
npm run buildcommand still exists for backward compatibility, we recommend usingnpm run build:vitefor better performance and modern output formats.
-
-
The CHANGELOG outlines the majority of classes and changes needed for migration, allowing you to easily refer to and perform search and replace where necessary.
If you need to add or modify utilities, you can consult the official bootstrap migration guide for a comprehensive list of changes.
This theme has been updated to work with Bootstrap 5.3.3, which includes several key changes from earlier Bootstrap 5 versions. Here's what you need to know:
-
SASS Import Changes:
- We've converted from mixed
@useand@importdirectives to consistent@importsyntax - Functions like
map.get()are now used asmap-get()for better compatibility - If you're extending this theme, maintain this consistent approach
- We've converted from mixed
-
Color Mode Support:
- Bootstrap 5.3+ adds built-in color modes (light/dark)
- Our theme now supports these modes with proper BC Gov styling
- Use the
.text-bg-*utilities for proper color combinations with background colors
-
New CSS Variables:
- Bootstrap 5.3 adds extensive CSS variables for colors, spacing, etc.
- Our theme overrides these appropriately for BC Gov styling
- You can use these variables directly in your custom CSS
-
Enhanced Grid System:
- Added the new
.container-fluidresponsive variants - Improved support for vertical spacing with gaps
- Added the new
-
Build System Update:
- Switched from Webpack to Vite for better performance
- Use
npm run build:viteinstead ofnpm run buildfor production builds - Use
npm run devfor development with hot reloading
- Update your HTML imports:
<!-- Old approach --> <script src="js/bootstrap-theme.js" defer="defer"></script> <!-- New approach --> <script type="module" src="js/bootstrap-theme.min.js"></script>
Refer to the official Bootstrap documentation to learn about extending or enhancing this theme.
Tooling and build follow the same steps as SCSS To Modify Variables/Themes section
https://www.npmjs.com/package/@bcgov/bootstrap-v5-theme
If you would like to update the project and would like to push your changes to the npm registry, the following will be useful.
To push to the npm registry, you must ensure that the version number has been updated to reflect any of the changes that you’ve made. Upon following semantic versioning, and updating the version number in package.json you can then publish the package in your own namespace.
- Ensure you are logged into your npm account. To log in via the terminal, run the following:
npm login- upon successful completion you will see the following:
Logged in on https://registry.npmjs.org/.-
Now you can publish your package
- Run the following command in your termnial
npm publish --access=publicIf you are publishing to a namespace, you will have to ensure that --acess=public is included in your run command as packages for an org are private by default
Note: You can test your changes locally by changing the name in the package.json to @<your-namespace>/bootstrap-v5-theme and publishing there. Once you are satisfied, you can republish to the @bcgov org.
If Bootstrap has a minor update and you wish to update the minified CSS and JS files, do the following:
- Run
npm run buildin order to build the needed assests. - Mark a new release on GitHub
- Publish the updated dist folder to NPM JS Registry as a new NPM package version
This fork has been updated to work with Bootstrap 5.3.3 and includes improved support for:
- Consistent Sass import syntax using
@importfor better compatibility with Bootstrap 5.3.x - Modern build system using Vite instead of Webpack
- Simplified asset management
- Updated dependencies for better development experience
This theme now uses Vite for both development and production builds, offering:
- Faster build times
- Improved development experience with hot module replacement
- Better asset optimization
- Install dependencies:
npm install